<!-- 工资福利类 -->
<template>
	<view v-if="feeCategory=='0'">
		<view style="margin: 20rpx 20rpx 0rpx 20rpx;" v-if="showButton || !showFlowSubmitButton">
			<u-button text="新增" type="primary" @click="addFL"></u-button>
		</view>
		<!-- 工资福利类列表 -->
		<view class="inforamtion" style="display: flex;" v-for="(item, index) in salaryFeeInfoList" :key="index">
			<view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">工资福利大类</view>
					<view class="rl">{{ item.bigCategoryName }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">工资福利小类</view>
					<view class="rl">{{ item.smallCategoryName }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">发票类型</view>
					<view class="rl">{{ item.isSpecial_dictText }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">报销金额（元）</view>
					<view class="rl">{{ item.amount }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">税费金额（元）</view>
					<view class="rl">{{ item.taxation }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">未税金额（元）</view>
					<view class="rl">{{ item.untaxedAmount }}</view>
				</view>
				<view class="option" style="width: 460rpx;">
					<view class="lf">税率（%）</view>
					<view class="rl">{{ item.taxRate }}</view>
				</view>
			</view>
			<view  style="flex: 1; display: flex; align-items: center; justify-content: flex-end;">
				<u-icon v-if="showButton || showFlowSubmitButton" name="edit-pen-fill" color="#2979ff" size="20" @click="onEdit(item, index)"></u-icon>
				<template v-if="showButton || !showFlowSubmitButton">
					<u-line  direction="col" length="20" margin="0 10rpx"></u-line>
					<view class="icon custom-icon custom-icon-fuzhiwenjian" style="color:#2979ff;font-size: 20px"
						@click.stop="handleCopyForm(item, index)"></view>
					<u-line direction="col" length="20" margin="0 10rpx"></u-line>
					<u-icon name="trash-fill" color="red" size="20"  @click="onDelete(index)"></u-icon>
				</template>
			</view>
		</view>
		
		<!-- 新增弹框-->
		<u-popup mode="bottom" :show="showNew" @close="showNew=false">
			<view >
				<u-form :model="basicForm" :rules="rules" labelPosition="top" ref="form" labelWidth="auto"
				  :labelStyle="{
				  	fontSize: '14px',
				  	color: '#B2B2B2',
				  	lineHight: '20px'
				  }"
				>
				  <view class="basic-style">
				    <u-form-item label="工资福利大类:" prop="bigCategory" required>
						<selectListTag
							class="w-100"
							v-model="basicForm.bigCategory"
							:titleValue='basicForm.bigCategoryName'
							placeholder="请选择工资福利大类"
							dictName='A01A01'
							border="surround"
							suffixIcon="arrow-down-fill"
							:suffixIconStyle="{color: '#B2B2B2'}"
							@change='changeBigCategory'/>
				    </u-form-item>
				    <u-form-item label="工资福利小类:" prop="smallCategory" required>
						<selectListTag
							class="w-100"
							ref="smallCategory"
							:disabled="basicForm.bigCategory?false:true"
							:dictName='basicForm.bigCategory'
							v-model="basicForm.smallCategory"
							:titleValue='basicForm.smallCategoryName'
							placeholder="请选择工资福利小类"
							border="surround"
							suffixIcon="arrow-down-fill"
							:suffixIconStyle="{color: '#B2B2B2'}"
							@change='changeSmallCategory'/>
				    </u-form-item>
					<u-form-item label="发票类型:" prop="isSpecial" :required="basicForm.isMust == 1">
						<h-select-input-tag
						  class="w-100"
						  v-model="basicForm.isSpecial"
						  objectField="basicForm.isSpecial"
						  placeholder="请选择发票类型"
						  border="surround"
							suffixIcon="arrow-down-fill"
							:suffixIconStyle="{ color: '#B2B2B2' }"
						  dictName="cost_invoice_type"
						  @change='isSpecialChange'/>
					</u-form-item>
					<u-form-item label="报销金额(元):" prop="amount" required>
						<h-money-input v-model="basicForm.amount"  @blur='inputAmount' placeholder="请输入报销金额"></h-money-input>
					</u-form-item>
					<u-form-item label="税费金额(元):" prop="taxation" :required="!isSpecialDisabled">
						<h-money-input
							placeholder="请输入税费金额"
							:max="basicForm.amount"
							:disabled="isSpecialDisabled"
							@blur='inputAmount'
							v-model='basicForm.taxation'
						></h-money-input>
					</u-form-item>
				    <u-form-item label="未税金额(元):" prop="untaxedAmount">
				      <u-input type='number' disabled v-model="basicForm.untaxedAmount" v-number-normal placeholder="请输入未税金额"/>
				    </u-form-item>
						<u-form-item label="税率(%):" prop="taxRate" :required="!isTaxRateDisabled">
							<h-number-input placeholder="请输入税率" :disabled="isTaxRateDisabled" v-model="basicForm.taxRate" :digit="0" :max="99999999" :min="0"></h-number-input>
						</u-form-item>
				  </view>
				
				  <view class="space-x-1 mt-1" style="display: flex">
				    <u-button type="primary" text="关闭" plain @click="onClose"/>
						<u-button type="primary" text="保存" @click="onSave" :throttleTime="500"/>
				  </view>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import selectListTag from './comp/select-list-tag.vue'
	export default {
		components:{ selectListTag },
		props:{
			feeCategory:{
				type:String,
				default:''
			},
			showButton: {
				type: Boolean,
				default: true
			},
			showFlowSubmitButton: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isSpecialDisabled:false, // 判断税费金额是否填写
				isTaxRateDisabled:false, // 判断税率是否填写
				isEdit:false,//是否是编辑
				salaryFeeInfoList:[],//当前的费用报销表单list
				showNew: false, 
				basicForm:{
					bigCategory:"",//工资福利大类
					bigCategoryName:'',
					smallCategory:"",//工资福利小类
					smallCategoryName:'',
					isSpecial:'',//发票类型
					isSpecial_dictText:'',
					amount:'',//报销金额(元)
					taxation:0.00,//税费金额(元)
					untaxedAmount:'',//未税金额(元)
					taxRate: '',// 税率
					isMust: '' // 是否必填
				},
				rules:{
					bigCategory:[{ required: true, message: '请选择工资福利大类!', trigger: 'change' }],
					smallCategory: [{ required: true, message: '请选择工资福利小类!', trigger: 'change' }],
					amount: [
						{ required: true, message: '请填写报销金额!', trigger: 'blur' },
						{ pattern: /^(?!0\.00)(?!0$)([1-9]\d*|0)(\.\d{2})?$/, message: '请输入正确的金额!',trigger: ['blur', 'change']}
					],
					taxRate: [{ required: true, message: '请填写税率!', trigger: 'blur' }],
				}
			}
		},
		methods: {
			// 点击新增
			addFL(){
				this.isEdit=false
				this.basicForm={
					bigCategory:"",//工资福利大类
					bigCategoryName:'',
					smallCategory:"",//工资福利小类
					smallCategoryName:'',
					isSpecial:'',//发票类型
					isSpecial_dictText:'',
					amount:'',//报销金额(元)
					taxation:0.00,//税费金额(元)
					untaxedAmount:'',//未税金额(元)
					taxRate:0,// 税率(%)
				}
				this.showNew=true // 打开弹窗
				this.specialRules() // 发票类型验证规则
			},
			// 删除
			onDelete(index){
				uni.showModal({
					title: '提示',
					content: '是否删除该数据？',
					success: (res) => {
						if (res.confirm) {
							this.salaryFeeInfoList.splice(index,1)
							this.$emit('inputAmount', '1')
						}
					}
				});
			},
			// 编辑
			onEdit(item, index){
				this.isEdit=true
				this.basicForm= Object.assign({}, item)
				this.showNew=true
				this.specialRules() // 发票类型验证规则
			},
			// 复制
			handleCopyForm(item) {
				var _this = this
				uni.showModal({
					content: '确定复制行吗？',
					success: (res) => {
						if (res.confirm) {
							let model = Object.assign({}, item);
							model.id=parseInt(Math.random() * 1000000000000);
							_this.salaryFeeInfoList.push(JSON.parse(JSON.stringify(model)))
							_this.$emit('inputAmount', '1')
						}
					},
				})
			},
			// 切换大类
			changeBigCategory(pcode,item){
				this.basicForm.bigCategoryName=item.title
				this.basicForm.smallCategory = ''
				this.$set(this.basicForm,"checkPosition",null);
				this.$set(this.basicForm,"isMust",item.isMust); // 隐藏字段 => 是否必填
				// this.$set(this.basicForm,"checkPosition",item.checkPosition); // 隐藏字段 => 审核岗位
				if(this.basicForm.isMust=='1'){
					this.$set(this.rules,"isSpecial",[ { required: true, message: '请选择发票类型!'},]);
				}else{
					this.$set(this.rules,"isSpecial",[]);
				}
				this.$refs.smallCategory.defaultIndex = [0]
			},
			// 切换小类
			changeSmallCategory(pcode,item){
				this.basicForm.smallCategoryName=item.title
				this.$set(this.basicForm,"checkPosition",item.checkPosition); // 隐藏字段 => 审核岗位
			},
			// 发票类型验证规则
			specialRules(){
				// 0 普票 1专票 2其他
				if(this.basicForm.isMust=='1'){
					this.$set(this.rules,"isSpecial",[ { required: true, message: '请选择发票类型!'},]);
				}else{
					this.$set(this.rules,"isSpecial",[]);
				}
				if(this.basicForm.isSpecial == '0'){
					// 普票：税费和税率默认为0，发起人不可编辑和修改（流程中也不可修改）
					this.$delete(this.rules, 'taxation');
					this.$delete(this.rules, 'taxRate');
					this.isSpecialDisabled=true;
					this.isTaxRateDisabled=true;
				}else if (this.basicForm.isSpecial == '1'){
					// 专票：税费和税率为必填，发起人可编辑和修改 （税率计算公式：税费金额/未税金额取整，流程中都可修改）
					this.$set(this.rules, 'taxRate', [{ required: true, message: '请输入正确的税率!'}]);
					this.$set(this.rules, 'taxation', [
						{ required: true, message: '请输入税费金额!', trigger: 'blur' },
						// 税费金额不能为零
						{ pattern: /^(?!0\.00)(?!0$)([1-9]\d*|0)(\.\d{2})?$/, message: '请输入正确的税费金额!' }
					])
					this.isSpecialDisabled=false;
					this.isTaxRateDisabled=false;
				} else {
					
					// 其他或者不填：税费金额必填默认为0，发起人可修改，税率默认为0，发起人不可编辑和修改（流程中可以修改税费金额，不可修改税率）
					this.$delete(this.rules, 'taxRate');
					this.$set(this.rules, 'taxation', [
						{ required: true, message: '请输入税费金额!', trigger: 'blur' },
						// 税费金额可以为零
						{ pattern: /^(([0-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的税费金额!' }
					])
					this.isSpecialDisabled=false;
					this.isTaxRateDisabled=true;
				}
			},
			// 切换发票类型
			isSpecialChange(value){
				if(this.basicForm.isMust=='1'){
					this.$set(this.rules,"isSpecial",[ { required: true, message: '请选择发票类型!'},]);
				}else{
					this.$set(this.rules,"isSpecial",[]);
				}
				if(value=='0'){
					// 普票：税费和税率默认为0，发起人不可编辑和修改（流程中也不可修改）
					this.$set(this.basicForm, 'taxation',0.00);
					this.$set(this.basicForm, 'taxRate',0);
					this.$delete(this.rules, 'taxation');
					this.$delete(this.rules, 'taxRate');
					this.$refs.form.clearValidate('taxation');
					this.$refs.form.clearValidate('taxRate');
					this.isSpecialDisabled=true;
					this.isTaxRateDisabled=true;
					this.basicForm.isSpecial_dictText='普票'
				}else if(value=='1'){
					// 专票：税费和税率为必填，发起人可编辑和修改 （税率计算公式：税费金额/未税金额取整，流程中都可修改）
					this.$refs.form.clearValidate('taxation')
					this.$set(this.basicForm, 'taxation',null);
					this.$set(this.basicForm, 'taxRate',null);
					this.$set(this.rules, 'taxRate', [{ required: true, message: '请输入正确的税率!'}]);
					this.$set(this.rules, 'taxation', [
						{ required: true, message: '请输入税费金额!', trigger: 'blur' },
						{ pattern: /^(?!0\.00)(?!0$)([1-9]\d*|0)(\.\d{2})?$/, message: '请输入正确的税费金额!' }
					])
					this.isSpecialDisabled=false;
					this.isTaxRateDisabled=false;
					this.basicForm.isSpecial_dictText='专票'
				}else{
					this.$refs.form.clearValidate('taxation')
					// 其他或者不填：税费金额必填默认为0，发起人可修改，税率默认为0，发起人不可编辑和修改（流程中可以修改税费金额，不可修改税率）
					this.$set(this.basicForm, 'taxation',0.00);
					this.$set(this.basicForm, 'taxRate',0);
					this.$delete(this.rules, 'taxRate');
					this.$set(this.rules, 'taxation', [
						{ required: true, message: '请输入税费金额!', trigger: 'blur' },
						// 税费金额可以为零
						{ pattern: /^(([0-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的税费金额!' }
					])
					this.isSpecialDisabled=false;
					this.isTaxRateDisabled=true;
					this.basicForm.isSpecial_dictText='其他'
				}
				this.inputAmount();
			},
			inputAmount () {
				// 判断当有值的
				if(this.basicForm.taxation === null || this.basicForm.taxation === '' || this.basicForm.taxation === undefined){
					this.$set(this.basicForm,'untaxedAmount', '');
					return false
				}
				let amount = 0
				if(Number(this.basicForm.amount) && (Number(this.basicForm.taxation) || Number(this.basicForm.taxation)==0)){
					amount	=(this.basicForm.amount-this.basicForm.taxation).toFixed(2);
					if(amount>0){
						this.$set(this.basicForm,'untaxedAmount',amount);
						if (this.basicForm.isSpecial == 1) {
							// 专票, 未税金额 = 报销金额 - 税费金额 
							this.$set(this.basicForm,'taxRate',(this.basicForm.taxation/this.basicForm.untaxedAmount*100).toFixed(0));
						} else {
							// 不是专票 默认为零
							this.$set(this.basicForm, 'taxRate',0);
						}
					}else{
						this.$set(this.basicForm,'untaxedAmount',0);
						this.$set(this.basicForm,'taxRate',0);
					}
				}
			},
			async onSave(){
				await this.$refs.form.validate()
				if(this.isEdit){
					this.salaryFeeInfoList.map((value, index) => {
						if (this.basicForm.id == value.id) {
							this.$set(this.salaryFeeInfoList, index, this.basicForm)
						}
					})
				}else{
					this.$set(this.basicForm,'id',parseInt(Math.random() * 1000000000000))
					// 给当前的表单赋值
					this.salaryFeeInfoList=this.salaryFeeInfoList.concat(this.basicForm)
				}
				this.showNew=false
				// this.$refs.form.resetFields()
				this.$emit('inputAmount', '1')
			},
			onClose(){
				this.showNew=false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.inforamtion{
		margin-top: 10rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
	}
</style>